Basic Table
First Name |
Last Name |
Points |
Jill |
Smith |
50 |
Eve |
Jackson |
94 |
Adam |
Johnson |
67 |
Striped Table
The w3-striped class adds zebra-stripes to a table:
First Name |
Last Name |
Points |
Jill |
Smith |
50 |
Eve |
Jackson |
94 |
Adam |
Johnson |
67 |
Bordered Table
The w3-bordered class adds a bottom border to each table row:
First Name |
Last Name |
Points |
Jill |
Smith |
50 |
Eve |
Jackson |
94 |
Adam |
Johnson |
67 |
Striped Bordered Table
First Name |
Last Name |
Points |
Jill |
Smith |
50 |
Eve |
Jackson |
94 |
Adam |
Johnson |
67 |
Border Around Table
The w3-border class adds a border around the table.
First Name |
Last Name |
Points |
Jill |
Smith |
50 |
Eve |
Jackson |
94 |
Adam |
Johnson |
67 |
Table All
The w3-table-all class combines the w3-table, w3-bordered, w3-striped, and w3-border classes:
First Name |
Last Name |
Points |
Jill |
Smith |
50 |
Eve |
Jackson |
94 |
Adam |
Johnson |
67 |
Bo |
Nilson |
35 |
Flipped Stripes
To flip the zebra-stripes, add thead around the table header:
First Name |
Last Name |
Points |
Jill |
Smith |
50 |
Eve |
Jackson |
94 |
Adam |
Johnson |
67 |
Bo |
Nilson |
35 |
Centering Content in Table
First Name |
Last Name |
Points |
Jill |
Smith |
50 |
Eve |
Jackson |
94 |
Adam |
Johnson |
67 |
Bo |
Nilson |
35 |
Centering a Column
First Name |
Last Name |
Points |
Jill |
Smith |
50 |
Eve |
Jackson |
94 |
Adam |
Johnson |
67 |
Right Align a Column
First Name |
Last Name |
Points |
Jill |
Smith |
50 |
Eve |
Jackson |
94 |
Adam |
Johnson |
67 |
Hoverable Table
First Name |
Last Name |
Points |
Jill |
Smith |
50 |
Eve |
Jackson |
94 |
Adam |
Johnson |
67 |
Table With Different Hover Colors
If you want different hover colors, add w3-hover-color classes to each tr element:
First Name |
Last Name |
Points |
Jill |
Smith |
50 |
Eve |
Jackson |
94 |
Adam |
Johnson |
67 |
Bo |
Nilson |
35 |